<script setup name="App">
import Child from './Child.vue'
// 父传子
import { ref } from 'vue'
const count = ref(1)

// Vue2 中有一个 .sync 修饰符，在组件传值的时候，它和 v-model 很像，都是父传子，子再改父这样一个操作的便捷写法，区别是 .sync 可以在组件上写多次。
// Vue3 中把 .sync 修饰删了，统一换成了 v-model

const num = ref(3)
</script>
<template>
  <div>
    App: {{ count }}
    {{ num }}
    <hr />
    <!-- 这里的 $event 永远永远永远是 子组件 $emit 的时候的第二个参数 -->
    <!-- <Child :count="count" @updateCount="count = $event" /> -->
    <!-- <Child :aaa="count" @updateCount="count = $event" /> -->
    <!-- <Child :modelValue="count" @updateCount="count = $event" />-->
    <!-- <Child :modelValue="count" @update:modelValue="count = $event" /> -->
    <!-- 和上面等价 -->
    <!-- <Child v-model:modelValue="count" /> -->
    <!-- 和上面等价 -->
    <!-- <Child v-model="count" /> -->
    <Child v-model="count" v-model:num="num" />
  </div>
</template>
